<template>
	<div>
		<el-form :model="form" label-width="120px">
			<el-form-item label="请输入电话">
				<el-input v-model="form.tel" />
			</el-form-item>
			<el-form-item label="请输入单价">
				<el-input v-model="form.price" />
			</el-form-item>
			<el-form-item label="请选择支付方式">
				<el-select v-model="form.method" placeholder="支付方式">
					<el-option label="支付宝" value="支付宝" />
					<el-option label="微信" value="微信" />
					<el-option label="银行卡" value="银行卡" />
				</el-select>
			</el-form-item>
			<el-form-item label="请选择订单状态">
				<el-radio-group v-model="form.orderState">
					<el-radio label="待付款" />
					<el-radio label="待发货" />
					<el-radio label="已发货" />
					<el-radio label="已完成" />
					<el-radio label="已关闭" />
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">创建订单</el-button>
				<el-button>重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
// do not use same name with ref
const form = reactive({
	"tel": '',
	"price": '',
	"method": '',
	"orderState": ''
})

const onSubmit = async () => {
	const resp = await axios.post('/api/list', { addOrder: form });
	ElMessage.success(resp.data.message)
	form.tel = ''
	form.price = ''
	form.method = ''
	form.orderState = ''
}
</script>